If playback doesn't begin shortly, try restarting your device.
4:17:04
5 seconds
Pull up for precise seeking
10. Nested Layouts Technique
3:04:43
•
You're signed out
Videos you watch may be added to the TV's watch history and influence TV recommendations. To avoid this, cancel and sign in to YouTube on your computer.
CancelConfirm
So we're going to use this from oneof the very early lessons box dash
Certificates are now available! https://courses.supersimple.dev/cours...
🎓 Enroll to get a Certificate of Completion and an elevated learning experience (breakdown into smaller videos covering specific topics, ad-free content, and progress tracking).
✅ Don't worry if you're halfway through the course or finished the course, you can skip the lessons you already finished and take the final test to get your Certificate.…...more
Hey everyone, certificates are now available for this course! https://courses.supersimple.dev/courses/html-css Enroll to get a Certificate of Completion and an elevated learning experience (breakdown into smaller videos covering specific topics, ad-free content, and progress tracking). Don't worry if you're halfway through the course or finished the course, you can skip the lessons you already finished and take the final test to get your Certificate. Thanks for supporting SuperSimpleDev. Your support helps me continue to focus on producing high-quality educational videos.
For those contemplating diving into a 6hr course...DO IT. His basic & foundational HTML/CSS explanations are in a league of it's own! This course is an amazing combination of audio and visual learning. You will not regret investing your time into this tutorial!!
Finally someone who teaches so normal humans can understand. Without suddenly bashing with unnecessary load of information, without using way too unnecessary technical words as if every viewer is a CS master. I'm starting this journey, thank you for bringing my confidence back Edit:2 days & I'm done with the course. It can sound exaggerating but this single video restored my confidence to enter the domain I always dreamt of working but was holding back bcz of fear of not understanding complex concepts. This is just a beginning, a long way to go from here, but atleast START was fantastic.Thank you buddy
Day 1: 1:17:39Day 2: 2:25:37Day 3: 3:16:49Day 4: 4:15:11Day 5: 5:07:15Day 6: Finished the entire courseI am very much thankful for the tutorial you've provided in this platform. This had helped me in a lot of ways. Back then, I'm having a hard time centering elements and some stuff involving css. I'm frustrated and I'm telling you I literally sucks at this. I googled everything so bad even the basic ones you could think of. But, as I finished this course, I'll be leaving with much knowledge having a great foundation in regard to html and css. In the future, I might be a successful web developer, and I owe it to you all. Again, thank you very much :))
I'm 51 minutes in, and this is the EXACT teaching style I learn best from. I'm about to begin a bootcamp in Full Stack and this is a godsend! I love how you explain everything right down to its detail and in the most simplistic way. Thank you!
This is such a well structured and easy to follow course. The addition of exercises at the end of each section reinforces the important concepts and makes you feel confident while solving them. Thank you for providing such a valuable and informative learning experience Simon!
I am currently watching this video, and in just 2 hours of watching this course, I learned so many things that will help me create my own website. I just want to thank you guys—all of you who teach programming on YouTube for free. It saves us a lot of time and helps us learn more quickly than what we can learn at school. Keep it up and I hope you teach more students who aspire to become a programmers in the future
I wanted to say THANK YOU I got my first web dev job! I started 9 months ago with this course and now I made a portfolio based on React Typescript projects and will start into my first frontend engineer job in July =) Believe in yourself guys! You can make it!
This course beats most of the paid courses I have found. The pace and explanation are very incredible! He also tacked most of the most important css and html topics. Thank you so much!!
As an experianced backend developer with limited exposure to front-end development, I view this jurney as the starting point of my transition into becoming a proficient full-stack web developer. Without a doubt, this is one of the most well-structured and comprehensive courses I have encountered in these subjects.
Wow, Simon! You have created a juggernaut of a course here. The information is sooooo well set out, concise and uncomplicated. You are a natural teacher and such a good human being for taking the time to educate people on this platform. I just finished the course today and am going to spend the next few weeks doing the other websites. Then I'll get into your Javascript course, as it will compliment the HTML/CSS skills. I thoroughly recommend this video to anyone wanting to learn HTML/CSS and start designing websites, or even just demystify the way websites are built. You can't go wrong with this video - it's completely engaging and produces visible results from lesson 1. The learning builds steadily from there, until you have rebuilt the YouTube page (no mean feat). So, good on you Simon.
Bro your channel is so good and underrated. I've watched many HTML, CSS, JavaScript courses on YouTube and this is by far one of the best if not the best I've ever come across. The way you explain, the way you give exercises throughout, the notes/diagrams on screen and much more. I was shocked when I realised you only have 8k subscribers, I just assumed you were one of those channels with a few hundred thousand seriously great stuff, keep it up!
This is the best free online course for HTML and CSS. It helps you learn in a practical manner, not just by explaining the features and properties but also through hands-on practice. Additionally, I appreciate the instructor's teaching style.
I love the way u give exercises after each concept we've learned . Most tutorials doesn't give exercises and this really help to implement the things we've learned. Thank u so much!!
This teaching style makes me feel so warm and cozy haha. All my anxiety has been relieved and I just can’t wait to get through this whole thing. You and David Malan are both on another level of teaching. Huge love
Can't express how grateful I am. I really enjoyed all the hours watching and learning from this awesome course! I actually consider studying something involving programming too.
Day 01: 1:17:30Day 02: 2:25:43Day 03: 3:16:48Day 04: 3:59:56Day 05: 4:25:50Day 06: 05:07:12Day 07: Finished! It was really worth it and I've learned a lot in one week! Thank you so much and more tutorials like this to come <3
Intro | 1. HTML Basics | 2. CSS Basics | 3. Hovers, Transitions, Shadows | 4. Chrome DevTools & CSS Box Model | 5. Text Styles | 6. The HTML Structure | 7. Images and Text Boxes | 8. CSS Display Property | 9. The div Element | 10. Nested Layouts Technique | 11. CSS Grid | 12. Flexbox | 13. Nested Flexbox | 14. CSS Position | 15. Position Absolute and Relative | 16. Finish the Project | 17. More CSS Features | Outro
Introduction | 1: Welcome to the HTML & CSS Course | 2: HTML Tags | 3: Write a news article | 4: The image tag | 5: Nesting | 6: Internet superpowers - Change the BBC news! | 7: Interactive elements - Button | 8: Interactive elements - input tags -- Experiment with input types 100 | 9: Let’s build Google! | 10: Aside - Anchor tags | 11: Add an anchor tag to Google.com | 12: Proper document structure | 13: Aside: Lists | 14: Build a personal Website | 15: Deploy your Personal Website | 16: HTML Recap | 1: Let’s learn CSS! | 2: Write your first lines of CSS! | 3: Write your first lines of CSS! Solution | 4: Let’s destroy wikipedia - recording | 5: Link to the CSS file | 6: Set the width of the elements | 7: Inline vs block elements | 8: Margin top | 9: Divs rule the world | 10: CSS classes | 11: Aside - Learn margins via flags | 12: Add space between our elements | 13: Aside - Centering with margins | 14: Centering our content | 15: Aside - padding | 16: Aside - Border and border-radius | 17: Aside challenge - style Twitter button | 18: Fix the input field | 19: Center the button | 20: Style the button | 21: Why we can’t have two block-level buttons | 22: Aside - Flexbox | 23: Centering both buttons with flexbox | 24: Google clone recap | 1: Building your digital business card | 2: Fix the image path | 3: Add alt attribute | 4: Make image smaller | 5: Add a border and padding | 6: Aside - flexbox child containers | 7: Flex item containers | 8: Add a utility class | 9: Justify the items | 10: Center the card | 11: Aside - inheritance | 12: Center the text via inheritance | 13: Add colors | 14: Web-safe fonts | 15: Aside - margin/padding shorthand | 16: Use the margin & padding shorhands | 17: Deploy your Digital Business Card | 18: Business Card Recap | 1: Let’s go to space | 2: Add a background image from unsplash | 3: Center elements and Style button | 4: Add a Google font | 5: @font-face | 6: Aside - spans | 7: Add an underline using a span | 8: Use an ID for the logo | 9: Replace the jpg with a webp | 10: Choose a color palette from an image | 11: Add the terms & conditions section | 12: Aside - text shadow | 13: Improving the readability with text shadows | 14: Space - Exploration recap | 1: Let’s build a Birthday GIFt site | 2: Add basic header styling | 3: Set the colors | 4: Add shadow on text | 5: We have a problem that flexbox can fix | 6: Aside - align-items | 7: Aside - flex-direction | 8: Turn the header into a flexbox | 9: Fix date and age design | 10: Create the first gift | 11: Replace the img with a div | 12: Aside - make elements change on hover | 13: Add the hover effect | 14: Create the next GIFt | 15: Create two more GIFts | 16: Create the final GIFt | 17: Add the footer | 18: Add a background gradient | 19: Personalize the Birthday GIFt Site | 20: Use GitHub Desktop to publish your Birthday GIFt Site | 21: Deploying your Birthday GIFt Site | 22: Use VS Code to edit your Birthday GIFt | 23: GIFt site recap | 1: It’s time to go solo! | 2: Solo Project - Hometown Homepage | 3: Congrats on completing the course!
INTRODUCTION TO HTML | BASIC HTML TAGS | FORMATTING TAGS | ORDERED AND UNORDERED LIST | CREATING TABLE WITH ROWSPAN AND COLSPAN | IMAGE,ANCHOR,MARQUEE TAGS | GENERAL PURPOSE ATTRIBUTES | FORMS (TEXTBOX,RADIO BUTTON,CHECKBOX,TEXTAREA) | FORMS (SELECT,FILE UPLOAD,BUTTON) | FRAMES | IMAGE MAP | SELECT , OPTION & OPTGROUP TAGS | FIELDSET & LEGEND TAG | AUDIO , VIDEO & SOURCE TAGS | INTRODUCTION TO CSS | COLORS IN CSS | TYPES OF SELECTORS IN CSS | BACKGROUND PROPERTY IN CSS | BORDERS IN CSS | MARGINS AND PADDINGS IN CSS | FONT PROPERTY IN CSS | LINKS IN CSS | DISPLAY PROPERTY IN CSS | FLOAT PROPERTY IN CSS | COLUMN PROPERTY IN CSS | OPACITY PROPERTY IN CSS | LINEAR GRADIENT IN CSS | CONIC GRADIENT IN CSS | RADIAL GRADIENT IN CSS
What to expect in the Course? | Multitasking | Difference between Thread and a Process | Threads in Java | The Main Thread | Thread Creation in Java | Extending Thread Class to create a Thread | Implementing Runnable | Deep Diving into the Thread Class | Synchronization in Java | Race Condition and Introduction to Concurrency | Synchronization Demo with Stacks (Synchronized Methods and Synchronized Blocks) | Using Objects as Locks | Synchronization in Static Methods | Rules of Synchronization | Race Condition | Thread Safety | The Volatile Keyword | Using the Volatile Keyword in Singleton Design Pattern | Producer Consumer Problem (Designing a Blocking Queue) (Introducing wait() and notify()) | Thread States and Thread Transitions | Running and Yielding of a Thread | Sleeping and Waking Up of a Thread | Waiting and Notifying of a Thread | Thread Timed Out | Interruption of a Thread | Thread Joining | Thread Priority | Thread Scheduler | Deadlocks | Create a Deadlock in Java. (Interview Question) | Support my Content
Introduction | How JS Engine Executes the Code using Call Stack | Main Job of the Call Stack | How does JavaScript perform async tasks | Behind the Scenes in Browser | Web APIs in JS | How setTimeout Works behind the scenes in Browsers | Event Loop & CallBack Queue in JS | How Event Listeners Work in JS | More about Event Loop | Why do we need Event Loop | How fetch() function works | MicroTask Queue in JS | What are MicroTasks in JS? | Starvation of Functions in Callback Queue | Teaser of the Next Video | Thank you for watching Namaste JavaScript